<template>
  <div class="basic-hook-demo p-4">
    <div class="space-y-6">
      <!-- ref 演示 -->
      <div class="hook-section">
        <h4 class="hook-subtitle">ref() - 基础响应式引用</h4>
        <div class="space-y-3">
          <div class="flex items-center space-x-3">
            <label class="text-sm font-medium">计数器:</label>
            <span class="px-3 py-1 bg-blue-100 rounded font-mono">{{ count }}</span>
            <button @click="count++" class="btn-small btn-blue">+1</button>
            <button @click="count--" class="btn-small btn-red">-1</button>
          </div>
          <div class="flex items-center space-x-3">
            <label class="text-sm font-medium">文本:</label>
            <input v-model="message" class="input-small" placeholder="输入文本" />
            <span class="text-gray-600 text-sm">{{ message.length }} 字符</span>
          </div>
        </div>
      </div>

      <!-- reactive 演示 -->
      <div class="hook-section">
        <h4 class="hook-subtitle">reactive() - 响应式对象</h4>
        <div class="space-y-3">
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block text-sm font-medium mb-1">姓名:</label>
              <input v-model="user.name" class="input-small w-full" />
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">年龄:</label>
              <input v-model.number="user.age" type="number" class="input-small w-full" />
            </div>
          </div>
          <div class="p-3 bg-gray-100 rounded text-sm">
            用户信息: {{ JSON.stringify(user, null, 2) }}
          </div>
        </div>
      </div>

      <!-- computed 演示 -->
      <div class="hook-section">
        <h4 class="hook-subtitle">computed() - 计算属性</h4>
        <div class="space-y-3">
          <div class="grid grid-cols-3 gap-3">
            <div>
              <label class="block text-sm font-medium mb-1">数字 A:</label>
              <input v-model.number="numberA" type="number" class="input-small w-full" />
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">数字 B:</label>
              <input v-model.number="numberB" type="number" class="input-small w-full" />
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">和 (计算):</label>
              <div class="px-3 py-2 bg-green-100 rounded font-mono text-center">
                {{ sum }}
              </div>
            </div>
          </div>
          <div class="text-xs text-gray-500">计算属性会自动缓存结果，只有依赖变化时才重新计算</div>
        </div>
      </div>

      <!-- watch 演示 -->
      <div class="hook-section">
        <h4 class="hook-subtitle">watch() - 侦听器</h4>
        <div class="space-y-3">
          <div class="flex items-center space-x-3">
            <label class="text-sm font-medium">被监听的值:</label>
            <input v-model="watchedValue" class="input-small" placeholder="输入任何值" />
            <button @click="clearWatchLogs" class="btn-small btn-gray">清空日志</button>
          </div>
          <div class="p-3 bg-gray-100 rounded max-h-32 overflow-y-auto">
            <div class="text-xs font-medium mb-2">监听日志:</div>
            <div v-for="(log, index) in watchLogs" :key="index" class="text-xs text-gray-600 mb-1">
              {{ log }}
            </div>
            <div v-if="watchLogs.length === 0" class="text-xs text-gray-400">
              修改上面的值来查看监听效果
            </div>
          </div>
        </div>
      </div>

      <!-- watchEffect 演示 -->
      <div class="hook-section">
        <h4 class="hook-subtitle">watchEffect() - 立即执行的侦听器</h4>
        <div class="space-y-3">
          <div class="flex items-center space-x-3">
            <label class="text-sm font-medium">效果计数器:</label>
            <span class="px-3 py-1 bg-purple-100 rounded font-mono">{{ effectCount }}</span>
            <button @click="effectCount++" class="btn-small btn-purple">触发 watchEffect</button>
          </div>
          <div class="p-3 bg-purple-50 rounded text-sm">
            <div class="font-medium mb-1">watchEffect 执行结果:</div>
            <div class="text-purple-700">{{ effectResult }}</div>
          </div>
          <div class="text-xs text-gray-500">watchEffect 会立即执行，并在依赖变化时重新执行</div>
        </div>
      </div>
    </div>

    <!-- 代码说明 -->
    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
      <h5 class="text-sm font-medium text-blue-800 mb-2">💡 核心概念</h5>
      <ul class="text-xs text-blue-700 space-y-1">
        <li>• <strong>ref</strong>: 包装基础类型值，通过 .value 访问</li>
        <li>• <strong>reactive</strong>: 直接使响应式对象，深度响应</li>
        <li>• <strong>computed</strong>: 基于响应式依赖进行缓存的计算属性</li>
        <li>• <strong>watch</strong>: 明确指定要监听的数据源</li>
        <li>• <strong>watchEffect</strong>: 自动追踪使用的响应式依赖</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, watchEffect } from 'vue'

// ref 演示
const count = ref(0)
const message = ref('Hello Vue3!')

// reactive 演示
const user = reactive({
  name: 'Vue 开发者',
  age: 25,
})

// computed 演示
const numberA = ref(10)
const numberB = ref(20)
const sum = computed(() => {
  console.log('computed 重新计算')
  return numberA.value + numberB.value
})

// watch 演示
const watchedValue = ref('')
const watchLogs = ref<string[]>([])

const clearWatchLogs = () => {
  watchLogs.value = []
}

// 监听 watchedValue 的变化
watch(
  watchedValue,
  (newValue, oldValue) => {
    const timestamp = new Date().toLocaleTimeString()
    watchLogs.value.push(`[${timestamp}] "${oldValue}" → "${newValue}"`)

    // 限制日志数量
    if (watchLogs.value.length > 5) {
      watchLogs.value.shift()
    }
  },
  { immediate: false },
)

// watchEffect 演示
const effectCount = ref(0)
const effectResult = ref('')

// watchEffect 会立即执行，并在依赖变化时重新执行
watchEffect(() => {
  effectResult.value = `watchEffect 执行了 ${effectCount.value + 1} 次，时间: ${new Date().toLocaleTimeString()}`
  console.log('watchEffect 执行:', effectCount.value)
})
</script>

<style scoped lang="scss">
.basic-hook-demo {
  @apply bg-gray-50;
}

.hook-section {
  @apply p-4 bg-white rounded-lg border border-gray-200;
}

.hook-subtitle {
  @apply text-base font-semibold text-gray-800 mb-3 pb-2 border-b border-gray-200;
}

.btn-small {
  @apply px-3 py-1 text-sm rounded transition-colors;

  &.btn-blue {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }

  &.btn-red {
    @apply bg-red-500 text-white hover:bg-red-600;
  }

  &.btn-gray {
    @apply bg-gray-500 text-white hover:bg-gray-600;
  }

  &.btn-purple {
    @apply bg-purple-500 text-white hover:bg-purple-600;
  }
}

.input-small {
  @apply px-3 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
</style>
